import React, { useEffect, useState } from 'react'

import { result, cate } from '../axiosAPI/lzx'

import { Input, Button } from 'antd'

import { SearchOutlined, SyncOutlined, UserOutlined } from '@ant-design/icons'

import { useNavigate, useLocation } from 'react-router-dom'

import '../scss/Lzx.scss'

export default function lzx_paper() {
  const navigate = useNavigate()
  const location = useLocation()

  let { va1, n } = location.state  

  const [value, setValue] = useState(va1)
  const [nval, setNval] = useState(n)

  const [clazz, setClazz] = useState([])
  const [list, setList] = useState([])


  const [name, setName] = useState('')
  const [cla, setCla] = useState('')
  const [select, setSelect] = useState('')

  useEffect(() => {
    getList()
    getClazz()
  }, [])

  const getClazz = async () => {
    const { data: { code, data } } = await cate()
    if (code === 200) {
      setClazz(data)
    }
  }

  const getList = async () => {
    const { data: { code, data } } = await result()
    if (code === 200) {
      setList(data)
    }
  }

  const search = () => {
    let copy = [...list]

    if (name === '' && cla === '' && select === '') {
      return getList()
    } else {
      if (name !== '') {
        copy = copy.filter(item => item.student.name.includes(name))
      }
      if (cla !== '') {
        copy = copy.filter(item => item.clazz === cla)
      }
      if (select !== '') {
        copy = copy.filter(item => item.status === select)
      }
      setList(copy)
    }
  }

  return (
    <div id='paper'>
      <div className='box'>
        <div className='header'>

          <Input placeholder="请输入考试姓名" value={name} onChange={(e) => setName(e.target.value)} style={{ width: 200 }} />

          <select value={cla} onChange={(e) => setCla(e.target.value)}>
            <option value="">==请选择专业==</option>
            {clazz.map((item, index) => (
              <option value={item.name} key={index}>{item.name}</option>
            ))}
          </select>

          <select value={select} onChange={(e) => setSelect(e.target.value)}>
            <option value="Option 0">==请选择阅卷状态==</option>
            <option value="true">已阅卷</option>
            <option value="false">待阅卷</option>
          </select>

          <Button type="primary" icon={<SearchOutlined />} onClick={search}>查询</Button>
          <Button icon={<SyncOutlined />} onClick={() => { setName(''); setCla(''); setSelect('') }}>重置</Button>
        </div>
        <div className='content'>
          {
            list.filter(ele => ele.clazz === value && ele.paper.name === nval).map((item, index) => (
              <div key={index} className='item'>
                <div className='left'>
                  <div className='p'><p>{item.student.name}</p></div>
                  <div>
                    <UserOutlined style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', fontSize: '30px' }} />
                  </div>
                </div>
                <div className='right'>
                  <p>学号：{item.student.tid}</p>
                  <p>班级：{item.clazz}</p>
                  <p style={item.status ? { color: 'green' } : { color: 'red' }}>阅卷状态：{item.status ? '已阅卷' : '待阅卷'}</p>
                  <br />
                  <Button type="primary" onClick={() => navigate('/questions', { state: { item } })}>查看试卷</Button>
                </div>
              </div>
            ))
          }
        </div>
      </div>
    </div>
  )
}
